<html>

<head>
  <meta charset="utf-8">
  <title>下雪了！！</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>

</body>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<script>
  var scene = new THREE.Scene();
  var plane = new THREE.PlaneGeometry(150, 150)
  var planeMaterial = new THREE.MeshLambertMaterial({
    map: new THREE.TextureLoader().load("./pc1.jpg"),
    side: THREE.DoubleSide
  })
  var mesh = new THREE.Mesh(plane, planeMaterial)
  scene.add(mesh)
  var xCurrent;
  var xPreious
  document.onmousemove = function (e) {
    xCurrent = e.clientX
  }
  var textureTree = new THREE.TextureLoader().load("./3.png");
  // 大量创建雪花精灵
  var group = new THREE.Group()
  for (let i = 0; i < 1024; i++) {
    var spriteMaterial = new THREE.SpriteMaterial({
      map: textureTree,//设置精灵纹理贴图
    });
    // 创建精灵模型对象
    var sprite = new THREE.Sprite(spriteMaterial);
    group.add(sprite);
    // 控制精灵大小,
    sprite.scale.set(8, 8, 1); //// 只需要设置x、y两个分量就可以，因为精灵总会正对你，z轴将没有用
    var k1 = Math.random() - 0.5;
    var k2 = Math.random() - 0.5;
    var k3 = Math.random() - 0.5;
    // 设置精灵模型位置，在整个空间上上随机分布
    sprite.position.set(1024 * k1, 1024 * k3, 800 * k2)
  }
  scene.add(group)
  var point = new THREE.PointLight(0xeeffff)
  point.position.set(300, 200, 300)
  scene.add(point)
  var ambient = new THREE.AmbientLight(0x4f4f44)
  scene.add(ambient)
  var width = window.innerWidth
  var height = window.innerHeight
  var k = width / height
  var s = 300
  var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
  camera.position.set(0, 0, 268);//设置相机位置
  camera.lookAt(scene.position)
  var renderer = new THREE.WebGLRenderer();//渲染函数
  renderer.setClearAlpha(0);
  renderer.setSize(width, height)
  renderer.setClearColor(0x000000, 1)
  document.body.appendChild(renderer.domElement)
  var orbitControls = new THREE.OrbitControls(camera, renderer.domElement)
  orbitControls.target = new THREE.Vector3(0, 0, 0)
  function render() {
    renderer.render(scene, camera)
    mesh.rotateY(0.01)
    group.children.forEach((sprite) => {
      sprite.position.y -= 0.5
      if (xPreious && xCurrent - xPreious != 0) {
        if (xCurrent - xPreious != 0) {
          var xAbs = xCurrent - xPreious > 0 ? 1 : -1
          sprite.position.x += xAbs * Math.abs(xCurrent - 960 - sprite.position.x) * 0.003
        }
      }
      if (sprite.position.y < -200) {
        sprite.position.y = 400
      }
    })
    xPreious = xCurrent
    requestAnimationFrame(render)
  }
  render();
</script>

</html>